<template>
  <view class="essentials1">
    <view
      class="essentials_item"
      v-for="(item, index) in listv"
      :key="index"
      :style="{
        background: bacMapping[item.level_id].background,
      }"
      @click="goPlay(item)"
    >
      <view class="item_left">
        <image :src="item.url_img" mode="" class="tu"></image>
        <image
          src="@/static/images/juxing728.png"
          class="mask"
          mode=""
          v-if="item.is_buy == 0"
        ></image>
        <image
          src="@/static/images/icon_dtym_suo.png"
          class="suo"
          mode=""
          v-if="item.is_buy == 0"
        ></image>
        <image
          src="@/static/images/icon_dtym_bofang.png"
          class="open"
          mode=""
          v-else
        ></image>
      </view>
      <view class="item_right">
        <view class="title">
          {{ item.name }}
        </view>
        <view class="time">
          <!-- {{ item.time ||'0:00' }} -->
        </view>
        <view class="text">
          {{ bacMapping[item.level_id].text }}
        </view>
      </view>
    </view>
    <PlayerTwo ref="player" :show="show" @colse="colse"></PlayerTwo>
    <!-- <player ref="player" :show="show" @colse="colse"></player> -->
  </view>
</template>

<script>
import getVideoDuration from "@/common/VideoDuration.js";
import { add_log } from "@/common/api/play.js"; // 播放
import { daohangyiIf_buy } from "@/common/http.js"; // 接口
import PlayerTwo from "@/components/PlayerTwo.vue"; //音乐播放器
export default {
	components: {
		PlayerTwo
	},
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    level_id: {
      type: Number,
      default: 0,
    },
    id: {
      type: String,
      default: "0",
    },
  },
  watch: {
    list: {
      deep: true, // 深度监听每一个属性值, 如果是对象可以深度监听
      immediate: true, // 进入页面后立即自动调用handler函数
      handler(newValue) {
        this.listv = newValue;
        for (let i = 0; i < this.listv.length; i++) {
          this.listv[i].timeStr = this.getDurationFilter(
            this.listv[i].file_url
          );
        }

        // console.log(this.listv, "newList");
      },
    },
  },
  data() {
    return {
      listv: [],
      show: false,
      bacMapping: [
        {
          id: 1,
          background:
            "linear-gradient(to left, rgba(184,184,184,0.96) 0%,#F7F8FA 50%, #F7F8FA 100%)",
          text: "试听",
          color: "#55B877",
        },
        {
          id: 2,
          // background:'linear-gradient(to right, rgba(39,39,39,0.5) 0%,rgba(39,39,39,0.5) 50%, #8CD7A3 100%)',
          background:
            "linear-gradient(to left, #8CD7A3 0%,#F7F8FA 50%, #F7F8FA 100%)",
          text: "元气驿站",
          color: "#fff",
        },
        {
          id: 3,
          // background:'linear-gradient(to right, rgba(39,39,39,0.5) 0%,rgba(39,39,39,0.5) 50%, #FABC81 100%)',
          background:
            "linear-gradient(to left, #FABC81 0%,#F7F8FA 50%, #F7F8FA 100%)",
          text: "启初梦谷",
          color: "#fff",
        },
        {
          id: 4,
          // background:'linear-gradient(to right, rgba(39,39,39,00.5) 0%,rgba(39,39,39,0.5) 50%, #CFA5E3 100%)',
          background:
            "linear-gradient(to left, #CFA5E3 0%,#F7F8FA 50%, #F7F8FA 100%)",
          text: "青空天台",
          color: "#fff",
        },
        {
          id: 5,
          // background:'linear-gradient(to right, rgba(39,39,39,0.5) 0%,rgba(39,39,39,0.5) 50%,#7EC6FF 100%)',
          background:
            "linear-gradient(to left, #7EC6FF 0%,#F7F8FA 50%, #F7F8FA 100%)",
          text: "无极云顶",
          color: "#fff",
        },
        {
          id: 6,
          // background:'linear-gradient(to right, rgba(39,39,39,0.5) 0%,rgba(39,39,39,0.5) 50%, #6C87D0 100%)',
          background:
            "linear-gradient(to left, #6C87D0 0%,#F7F8FA 50%, #F7F8FA 100%)",
          text: "返朴归真",
          color: "#fff",
        },
      ],
    };
  },
  created() {
	  setTimeout(() => {
	  	if (this.$refs.player) {
	  		this.$refs.player.setIntervalT();
	  	}
	  }, 1000);
  },
  methods: {
    // 视频时长换算
    getDurationFilter(url) {
      getVideoDuration(url)
        .then((res) => {
          var hours = Math.floor(res / 3600);
          var minutes = Math.floor((res % 3600) / 60);
          if (minutes < 10) {
            minutes = "0" + minutes;
          }
          var remainingSeconds = Math.ceil(res % 60);
          if (remainingSeconds < 10) {
            remainingSeconds = "0" + remainingSeconds;
          }
          console.log(
            hours + "小时 " + minutes + "分钟 " + remainingSeconds + "秒",
            2222222222
          );
          return minutes + ":" + remainingSeconds;
        })
        .catch((err) => {
          //   console.log(err, "33333333");
        });
    },
    // 查询是否可以播放
    daohangyiIsBuy(item) {
      daohangyiIf_buy({ id: item.id })
        .then((res) => {
          if (res.data.user_is_buy == 1) {
            // 跳转播放
            if (item.file_type == 30) {
              // 跳视频预览
              uni.navigateTo({
                url: `/components/preview?type=false&vimg=${item.file_url}`,
              });
              return;
            }
            if (item.file_type == 20) {
              // 跳音频播放
              // console.log("展开音频播放模块", item);
              add_log({
                type: 2,
                id: item.id,
              }).then((res) => {
                // player();
                this.show = true;
                this.$refs.player.getList();
				this.$emit('handAudio')
                // console.log("ressssss", res);
              });
              // this.show = true;
              // this.$refs.player.getList();
              // uni.navigateTo({
              //   url: `/pages/home/Player?url=${item.file_url}`,
              // });
              // return;
            }
          } else {
            this.$emit("showPop", res.data);
          }

          // console.log(res, "是否可以观看");
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
    colse() {
      // console.log('走到了这里')
      this.show = false;
      this.$emit('showMap')
    },
    // 跳播放页
    goPlay(item) {
      console.log(item, "当前数据");
      this.daohangyiIsBuy(item);
      // if (this.level_id < item.level_id) {
      //   uni.$u.toast("等级不足,请开通对应会员后再播放");
      // } else {
      //   if (item.file_type == 30) {
      //     // 跳视频预览
      //     uni.navigateTo({
      //       url: `/components/preview?type=false&vimg=${item.file_url}`,
      //     });
      //     return;
      //   }
      //   if (item.file_type == 20) {
      //     // 跳音频播放
      //     uni.navigateTo({
      //       url: `/pages/home/Player?url=${item.file_url}`,
      //     });
      //     return;
      //   }
      // }
    },
  },
};
</script>

<style lang="scss" scoped>
.essentials1 {
  // width: 100%;
  // width: 750rpx;
  box-sizing: border-box;
  .essentials_item {
    // width: 100%;
	// width: 750rpx;
    border-radius: 16rpx;
    display: flex;
    flex-direction: row;
    position: relative;
    // background: linear-gradient(
    //   to left,
    //   rgba(184, 184, 184, 0.96) 0%,
    //   #f7f8fa 50%,
    //   #f7f8fa 100%
    // );
	// background: red;
	// background: linear-gradient( 90deg, rgba(184,184,184,0.96) 0%, #F7F8FA 100%);
	background: #f7f8fa;
    padding: 16rpx;
    box-sizing: border-box;
    margin-top: 32rpx;
    .item_left {
      width: 170rpx;
      height: 170rpx;
      position: relative;
      .tu {
        // width: 100%;
        // height: 100%;
      }
      .mask {
        // width: 100%;
        // height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 89;
      }
      .open {
        width: 72rpx;
        height: 72rpx;
        position: absolute;
		left: 0;
		top:0;
        // left: 50%;
        // top: 50%;
        margin-top: 49rpx;
        margin-left: 49rpx;
        z-index: 99;
      }
      .suo {
        width: 50rpx;
        height: 50rpx;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -25rpx;
        margin-left: -25rpx;
        z-index: 99;
      }
    }
    .item_right {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 8rpx 32rpx 10rpx;
      box-sizing: border-box;
      .title {
        font-size: 30rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: 400;
        color: #444444;
      }
      .time {
        font-size: 26rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: #888888;
      }
      .text {
        font-size: 28rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        position: absolute;
        right: 32rpx;
        top: 65rpx;
      }
    }
  }
}
</style>